<template>
  <div class='userlist'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="filterParams" ref="filter-form" class="demo-form-inline">
          <el-form-item label="手机号">
            <el-input v-model="filterParams.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="filterParams.rangeDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button  @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="userList"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="id"
          label="用户ID"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="头像"
          align="center"
        >
          <template slot-scope="scope">
            <img width="30px" :src="scope.row.portrait || 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
        prop="address"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleSelectRole(scope.row)"
          >分配角色</el-button>
        </template>
      </el-table-column>
      </el-table>
      <el-dialog
        title="分配角色"
        :visible.sync="dialogVisible"
        width="15%"
      >
      <el-select v-model="roleIdList" multiple placeholder="请选择">
        <el-option
          v-for="item in roles"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleAllocRole"
        >确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script lang='ts'>
import Vue from 'vue'
import { getUserPages, getRoleAll, getUserRoles, allocateUserRoles } from '@/services/role'
import { Form } from 'element-ui'
export default Vue.extend({
  name: 'userList',
  data () {
    return {
      userList: [],
      form: {
        tel: '',
        time: ''
      },
      filterParams: {
        currentPage: 1,
        pageSize: 100,
        phone: '',
        startCreateTime: '',
        endCreateTime: '',
        rangeDate: []
      },
      loading: true,
      dialogVisible: false,
      currentUser: null,
      roles: [],
      roleIdList: []
    }
  },
  mounted () {
    this.getUserall()
  },
  methods: {
    async getUserall () {
      this.loading = true
      const { rangeDate } = this.filterParams
      if (rangeDate && rangeDate.length) {
        this.filterParams.startCreateTime = rangeDate[0]
        this.filterParams.endCreateTime = rangeDate[1]
      } else {
        this.filterParams.startCreateTime = ''
        this.filterParams.endCreateTime = ''
      }
      const { data } = await getUserPages(this.filterParams)
      this.userList = data.data.records
      this.loading = false
    },
    async handleSelectRole (role: any) {
      this.currentUser = role
      const { data } = await getRoleAll()
      this.roles = data.data
      const { data: { data: userRoles } } = await getUserRoles((this.currentUser as any).id)
      this.roleIdList = userRoles.map((item: any) => item.id)
      this.dialogVisible = true
    },
    onSubmit () {
      this.filterParams.currentPage = 1
      this.getUserall()
    },
    handleReset () {
      (this.$refs['filter-form'] as Form).resetFields()
      this.getUserall()
    },
    async handleAllocRole () {
      await allocateUserRoles({
        userId: (this.currentUser as any).id,
        roleIdList: this.roleIdList
      })
      this.$message.success('操作成功')
      this.dialogVisible = false
    }
  }
})
</script>
<style lang='scss' scoped></style>
